import React from 'react';
import { Modal, Form, Input, Select, message, Button } from 'antd';
import { adminApi } from '../../api/services/admin/admin';
import type { CreateUserRequest } from '../../api/dto/admin';

const { Option } = Select;

interface AddUserModalProps {
  open: boolean;
  onCancel: () => void;
  onSuccess: () => void;
}

interface AddUserFormValues {
  name: string;
  profileId: string;
  email: string;
  systemRole: number;
  phoneNumber: string;
  status: number;
}

const AddUserModal: React.FC<AddUserModalProps> = ({ open, onCancel, onSuccess }) => {
  const [form] = Form.useForm<AddUserFormValues>();
  const [loading, setLoading] = React.useState(false);

  const handleSubmit = async (values: AddUserFormValues) => {
    try {
      setLoading(true);
      
      const requestData: CreateUserRequest = {
        name: values.name,
        profileId: values.profileId,
        email: values.email,
        systemRole: values.systemRole,
        phoneNumber: values.phoneNumber,
        status: values.status,
      };

      const response = await adminApi.createUser(requestData);

      if (response.code === 0 || response.code === 200) {
        message.success('用户创建成功！');
        form.resetFields();
        onSuccess();
        onCancel();
      } else {
        message.error(response.message || '创建用户失败');
      }
    } catch (error) {
      console.error('创建用户失败:', error);
      message.error('创建用户失败，请稍后再试');
    } finally {
      setLoading(false);
    }
  };

  const handleCancel = () => {
    form.resetFields();
    onCancel();
  };

  return (
    <Modal
      title="添加用户"
      open={open}
      onCancel={handleCancel}
      footer={null}
      width={600}
    >
      <Form
        form={form}
        layout="vertical"
        onFinish={handleSubmit}
        initialValues={{
          systemRole: 1,
          status: 1
        }}
      >
        <Form.Item
          label="姓名"
          name="name"
          rules={[
            { required: true, message: '请输入姓名' },
            { min: 2, max: 20, message: '姓名长度在2-20个字符之间' }
          ]}
        >
          <Input placeholder="请输入姓名" />
        </Form.Item>

        <Form.Item
          label="学号/工号"
          name="profileId"
          rules={[
            { required: true, message: '请输入学号或工号' },
            { pattern: /^[A-Za-z0-9]+$/, message: '学号/工号只能包含字母和数字' }
          ]}
        >
          <Input placeholder="请输入学号或工号" />
        </Form.Item>

        <Form.Item
          label="邮箱"
          name="email"
          rules={[
            { required: true, message: '请输入邮箱' },
            { type: 'email', message: '请输入有效的邮箱地址' }
          ]}
        >
          <Input placeholder="请输入邮箱地址" />
        </Form.Item>

        <Form.Item
          label="手机号"
          name="phoneNumber"
          rules={[
            { required: true, message: '请输入手机号' },
            { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号' }
          ]}
        >
          <Input placeholder="请输入手机号" />
        </Form.Item>

        <Form.Item
          label="角色"
          name="systemRole"
          rules={[{ required: true, message: '请选择角色' }]}
        >
          <Select placeholder="请选择角色">
            <Option value={1}>学生</Option>
            <Option value={2}>老师</Option>
          </Select>
        </Form.Item>

        <Form.Item
          label="状态"
          name="status"
          rules={[{ required: true, message: '请选择状态' }]}
        >
          <Select placeholder="请选择状态">
            <Option value={0}>禁用</Option>
            <Option value={1}>启用</Option>
            <Option value={2}>待验证</Option>
          </Select>
        </Form.Item>

        <Form.Item>
          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px', marginTop: '24px' }}>
            <Button onClick={handleCancel}>
              取消
            </Button>
            <Button type="primary" htmlType="submit" loading={loading}>
              {loading ? '创建中...' : '创建用户'}
            </Button>
          </div>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default AddUserModal; 